<template>
  <div class="app">
    <editor v-model="state" :formData="formData"></editor>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import data from './data.json'
import Editor from './packages/editor.jsx'
import {registerConfig as config} from './utils/editor-config.jsx'
import { provide } from '@vue/runtime-core'
import Range from './components/Range.jsx'
export default {
  components: {
    Editor,
    // Range
  },
  setup() {
    // 为什么用 ref？？？
    const state = ref(data)

    provide('config', config) // 组件配置往后传

    const formData = ref({
      username: 'day',
      password: 123,
      start: 1,
      end: 33
    })

    return {
      state,
      formData
    }
  }
}
</script>

<style lang="scss">
.app {
  position: fixed;
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
}
</style>
